<template>
  <div>
    <headers></headers>
    <div class="ggbgc" v-loading="loading">
      <div class="newdetails width min-width">
        <router-link @click.native="newlistgo('/newlist')" to="/newlist" class="newdetails-title">
          <div class="el-icon-arrow-left"></div>
          <span class="newdetails-title-span">{{$t('message.Newsdetails')}}</span>
        </router-link>
        <div class="newlist-content clear">
          <div class="newlist-content-left fl">
            <p class="left-title">{{newlist.title}}</p>
            <div class="Statistics clear">
              <div class="Statistics-left fl">
                <span class="Statistics-left-date">{{data}}</span>
                <span class="Statistics-left-name">{{newlist.author}}</span>
              </div>
              <div class="Statistics-right clear fr">
                <div class="left-Views clear fl">
                  <img class="left-Views-img fl" src="../../../assets/pc/newlist-c.png" alt="">
                  <span class="left-Views-Number fl">{{newlist.views}}</span>
                </div>
                <div class="right-Fabulous clear fl">
                  <img v-if="dzimga" @click="fabulous()" class="right-Fabulous-img fl" src="../../../assets/pc/newlist-d.png"
                       alt="">
                  <img v-else @click="fabulous()" class="right-Fabulous-img fl" src="../../../assets/pc/newlist-da.png"
                       alt="">
                  <span class="right-Fabulous-Number fl">{{newlist.likes}}</span>
                </div>
              </div>
            </div>
            <div class="newlist-content-img"><img :src="newlist.img_src" alt=""></div>
            <div class="newlist-content-con">
              <div class="con-content" v-html="newlist.content"></div>
            </div>
            <div class="newlist-switch clear">
              <div @click="previd" class="newlist-switch-left fl" v-if="prev_id!==null">
                <div class="el-icon-arrow-left"></div>
                <span>{{$t('message.Intheprevious')}}</span>
              </div>
              <div @click="nextid" class="fr newlist-switch-right" v-if="next_id!==null">
                <span>{{$t('message.Thenextarticle')}}</span>
                <div class="el-icon-arrow-right"></div>
              </div>
            </div>
          </div>
          <div class="newlist-content-right fr">
            <p class="right-title">{{$t('message.Hotrecommended')}}</p>
            <div @click="newsdetailid('/newdetails?newid='+item.id,item.id)"
                 class="right-list clear" v-for="item in groomlist" :key="item.id">
              <div class="right-list-img fl" :style="{backgroundImage:'url('+ item.img_src +')'}"></div>
              <div class="right-list-content fl">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios"
  import headers from "@/components/pc/public/header"

  export default {
    name: "newdetails",
    components: {
      headers
    },
    inject: ['reload'],
    data() {
      return {
        dzimga: true, //点赞图标切换
        lang: 'en',  //语言
        limit: 4,  //每一页显示条数
        prev_id: 0,  // 上一篇
        next_id: 0,  //下一篇
        id: this.$route.query.newid, //接收传过来的参数
        newlist: {},
        groomlist: [],
        detailsid: [],
        created_time: 0,  //时间戳初始值
        data: '',  //时间戳渲染
        loading: true  //加载
      }
    },
    created() {
      if (sessionStorage.sitename) {
        this.lang = sessionStorage.sitename;
      }
      this.init();  //新闻详情
      this.groom();  //热门推荐
    },
    methods: {
      // 请求新闻详情
      init() {
        axios.get('news/api/get_news_detail', {
          params: {
            language: this.lang,
            id: this.id
          }
        }).then((response) => {
          this.newlist = response.data.list;
          this.prev_id = response.data.list.prev_id;
          this.next_id = response.data.list.next_id;
          this.created_time = parseInt(response.data.list.created_time);
          this.created_time = this.created_time * 1000;
          this.datas();
          this.loading = false;
          var a = JSON.parse(sessionStorage.likeId);
          var o = 0;
          for (var i = 0; i < a.length; i++) {
            if (a[i] == this.id) {
              o = 1
            }
          }
          if (o) {
            this.dzimga = false;
          } else {
            this.dzimga = true;
          }
        })
          .catch(function (error) {
            console.log(error);
          });

      },
      // 请求新闻推荐
      groom() {
        axios.get('news/api/get_hot_news', {
          params: {
            language: this.lang,
            limit: this.limit
          }
        }).then((response) => {
          this.groomlist = response.data.list;
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      //时间戳转换
      datas() {
        var time = new Date(this.created_time);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        this.data = y + '-' + m + '-' + d
      },
      // 请求新闻点赞
      fabulous() {
        if (sessionStorage.likeId) {
          this.detailsid = JSON.parse(sessionStorage.likeId);
          this.dzimga = false
        }
        if (this.detailsid.indexOf(this.id) > -1) {
          return;
        } else {
          axios.get('news/api/like_news', {
            params: {
              id: this.id
            }
          }).then((response) => {
            sessionStorage.likeId = JSON.stringify(this.detailsid);
            this.newlist.likes++;
            this.dzimga = false;
          })
            .catch(function (error) {
              console.log(error);
            });
          this.detailsid.push(this.id);
        }
      },
      //上一页
      previd() {
        sessionStorage.url = JSON.stringify('/newdetails?newid='+ this.prev_id);
        if (this.prev_id === null) {
          return;
        }
        this.$router.push({
          name: 'newdetails',
          query: {
            newid: this.prev_id
          }
        });
        this.id = this.prev_id;
        this.init();
        this.reload()
      },
      //下一页
      nextid() {
        sessionStorage.url = JSON.stringify('/newdetails?newid='+ this.next_id);
        if (this.next_id === null) {
          return
        }
        this.$router.push({
          name: 'newdetails',
          query: {
            newid: this.next_id
          }
        });
        this.id = this.next_id;
        this.init();
        this.reload()
      },
      // 传参跳转
      newsdetailid(url,id) {
        sessionStorage.url = JSON.stringify(url);
        this.$router.push({
          name: 'newdetails',
          query: {
            newid: id
          }
        })
        this.reload()
      },
      newlistgo(url){
        sessionStorage.url = JSON.stringify(url)
      }
    }
  }
</script>
<style scoped>
  .newdetails {
    padding-top: 56px;
    padding-bottom: 130px;
  }

  .newdetails .newdetails-title {
    cursor: pointer;
  }

  .newdetails .newdetails-title .el-icon-arrow-left {
    font-size: 20px;
    color: #9a9a9a;
    font-weight: bolder;
  }

  .newdetails .newdetails-title .newdetails-title-span {
    font-size: 20px;
    color: #010101;
  }

  .newdetails .newlist-content {
    margin-top: 18px;
  }

  .newdetails .newlist-content .newlist-content-left {
    padding: 20px 23px 48px 19px;
    background: #fff;
  }

  .newdetails .newlist-content .newlist-content-left .left-title {
    width: 707px;
    font-size: 20px;
    color: #000000;
    text-align: center;
    line-height: 30px;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics {
    width: 707px;
    background: #f5f5f5;
    padding: 20px 26px 20px 14px;
    margin-top: 24px;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-left {
    font-size: 12px;
    color: #999999;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-left .Statistics-left-date {
    margin-right: 16px;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-right {
    cursor: pointer;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-right .left-Views {
    margin-right: 10px;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-right .left-Views .left-Views-img {
    width: 18px;
    height: 14px;
    margin-top: 2px;
    margin-right: 2px;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-right .left-Views .left-Views-Number {
    font-size: 12px;
    color: #999;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-right .right-Fabulous
  .right-Fabulous-img {
    width: 17px;
    height: 17px;
    margin-right: 2px;
  }

  .newdetails .newlist-content .newlist-content-left .Statistics .Statistics-right .right-Fabulous
  .right-Fabulous-Number {
    font-size: 12px;
    color: #999;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-content-img {
    width: 707px;
    height: 295px;
    margin-top: 34px;
    overflow: hidden;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-content-img img {
    width: 100%;
    min-height: 100%;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-content-con {
    width: 707px;
    margin-top: 32px;
    font-size: 14px;
    color: #000000;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-content-con .con-content {
    margin-top: 35px;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-switch {
    margin-top: 54px;
    height: 22px;
    font-size: 16px;
    color: #000;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-switch .newlist-switch-left {
    cursor: pointer;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-switch .newlist-switch-left .el-icon-arrow-left {
    font-size: 14px;
    font-weight: bold;
    color: #999999;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-switch .newlist-switch-right {
    cursor: pointer;
  }

  .newdetails .newlist-content .newlist-content-left .newlist-switch .newlist-switch-right .el-icon-arrow-right {
    font-size: 14px;
    font-weight: bold;
    color: #999999;
  }

  .newdetails .newlist-content .newlist-content-right {
    width: 420px;
    background: #fff;
    padding-top: 20px;
  }

  .newdetails .newlist-content .newlist-content-right .right-title {
    font-size: 14px;
    color: #010101;
    margin-bottom: 10px;
    margin-left: 20px;
  }

  .newdetails .newlist-content .newlist-content-right .right-list {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    display: block;
  }

  .newdetails .newlist-content .newlist-content-right .right-list:hover {
    background: #e8e8e8;
  }

  .newdetails .newlist-content .newlist-content-right .right-list:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  .newdetails .newlist-content .newlist-content-right .right-list .right-list-img {
    width: 92px;
    height: 92px;
    overflow: hidden;
    background: no-repeat center center;
    background-size: cover;
  }
  .newdetails .newlist-content .newlist-content-right .right-list .right-list-content {
    font-size: 14px;
    width: 210px;
    height: 92px;
    line-height: 92px;
    margin-left: 30px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


</style>
